body{
    margin: 0;
}
*{
    box-sizing: border-box;
}
/*--------------------------------*/
.pagein-enter{
    transform: translate(100%,0);
}
.pagein-enter-active{
    transition: all 0.7s;
    position: absolute;
    z-index: 30;
}
.pagein-leave-active{
    transition: all 0.7s;
    position: absolute;
}
.pagein-enter-to,.pagein-leave{
    transform: translate(0,0);
}
.pagein-leave-to{
    transform: translate(-30%,0);
}
/*------------------------------*/
.pageout-enter{
    transform: translate(-30%,0);
}
.pageout-enter-active,.pageout-leave-active{
    transition: all 0.7s;
    position: absolute;
}
.pageout-leave-active{
    z-index: -30;
}
.pageout-enter-to,.pageout-leave{
    transform: translate(0,0);
}
.pageout-leave-to{
    transform: translate(100%,0);
}